<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../libs/layui-v2.6.8/css/layui.css" />
  <link rel="stylesheet" href="../css/reset.css" />
  <link rel="stylesheet" href="../css/center.css" />
  <title>多选</title>
</head>

<body>
  <div id="maniBody">
    <div id="view"></div>
  </div>
</body>
<script id="demo" type="text/html">
    <span class="title">【{{ d.topTitle }}】</span>
    <div class="subject">{{ d.index +1}}、{{d.title }}</div>
    <form class="layui-form" action="" lay-filter="form">
      <div class="layui-form-item">
        <div class="layui-input-block">
          {{# layui.each(d.option, function(index, item){ }}
          <input
            type="checkbox"
            name="'{{'current['+item.xxbh+']'}}"
            title="{{item.xxbh +'.'+(item.xxnr)}}"
            lay-filter="current"
            lay-skin="primary"
          />
          {{# }); }}
        </div>
      </div>
    </form>
  </script>
<script src="../libs/jquery.min.js"></script>
<script src="../libs/layui-v2.6.8/layui.js"></script>

<script>
  function changeSize(type) {
    if (type == "small") {
      $(".title").css("fontSize", "2.5vw");
      $(".subject").css("fontSize", "3.5vw");
      $(".layui-form-checkbox[lay-skin=primary] *").css("fontSize", "3vw");
      $(".layui-form-checkbox[lay-skin=primary] i").css({
        "height": "3vw",
        "width": "3vw",
      });
    }
    if (type == "normal") {
      $(".title").css("fontSize", "3.2vw");
      $(".subject").css("fontSize", "4vw");
      $(".layui-form-checkbox[lay-skin=primary] *").css(
        "fontSize",
        "3.7333vw",
      );
      $(".layui-form-checkbox[lay-skin=primary] i").css({
        "height": "3.7333vw",
        "width": "3.7333vw",
      });
    }
    if (type == "larger") {
      $(".title").css("width", "20vw");
      $(".title").css("fontSize", "4vw");
      $(".subject").css("fontSize", "4.6vw");
      $(".layui-form-checkbox[lay-skin=primary] *").css("fontSize", "4.2vw");
      $(".layui-form-checkbox[lay-skin=primary] i").css({
        "height": "4.2vw",
        "width": "4.2vw",
      });
    }
    window.parent.autoIframeHeight();
  }
  layui.use("form", function () {
    // 当前数据
    var laytpl = layui.laytpl;
    var form = layui.form;

    var currentSubject = window.parent.getCurrentSubject();

    var getTpl = demo.innerHTML,
      view = document.getElementById("view");
    laytpl(getTpl).render(currentSubject, function (html) {
      view.innerHTML = html;
    });
    //提交
    form.render();
    form.on("checkbox(current)", function (data) {
      // 处理数据
      var formData = form.val("form", "current");
      var newData = [];
      for (var key in formData) {
        newData.push(getContentInBrackets(key));
      }

      // 传值
      window.parent.changeData(newData.join(","));

      changeSize(currentSubject.size);
    });

    // 处理数据
    var currentData = window.parent.getCurrentAnswer();
    var arr = currentData ? currentData.split(",") : [];
    var newCurrentData = {};
    arr.forEach(function (item) {
      var key = `'current[${item}]`;
      newCurrentData[key] = "on";
    });

    // 表单赋值
    form.val("form", newCurrentData);
    changeSize(currentSubject.size);
  });
  // 处理多选数据函数
  function getContentInBrackets(str) {
    var matches = str.match(/\[(.+?)\]/);
    if (matches && matches.length > 1) {
      return matches[1];
    }
    return null;
  }
</script>

</html>